<template>
  <el-container class="container">
    <el-aside class="sider" :width="isSiderCollapse ? '64px' : '180px'">
      <img src="../../assets/images/logo.png" alt>
      <el-menu
        :default-active="menuList[0].path"
        :collapse="isSiderCollapse"
        :collapseTransition="false"
        router
      >
        <el-menu-item v-for="menu in menuList" :key="menu.name" :index="menu.path">
          <i :class="menu.icon + ' icon'"></i>
          <span slot="title">{{ menu.label }}</span>
        </el-menu-item>
      </el-menu>
    </el-aside>
    <el-container>
      <el-header class="header" height="50px">
        <i class="el-icon-s-fold" @click="isSiderCollapse = !isSiderCollapse"/>
        <div>江苏传智播客教育科技股份有限公司</div>
        <el-tag size="small" color="rgba(255, 255, 255, .3)" :hit="true" effect="dark">专业版</el-tag>
        <div class="flex-box"></div>
        <el-dropdown @command="handleCommand">
          <span class="el-dropdown-link">
            {{userInfo.username}}
            <i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="goHome">首页</el-dropdown-item>
            <el-dropdown-item command="signBack">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-header>
      <el-main>
        <router-view/>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import * as api from "../../api/user";
import { mapState } from "vuex";
export default {
  data() {
    return {
      isSiderCollapse: false,
      // 权限控制
      menuList: [
        {
          icon: "el-icon-eleme",
          label: "首页",
          path: "/"
        },
        {
          icon: "el-icon-shopping-cart-2",
          label: "组织架构",
          path: "/structure"
        },
        {
          icon: "el-icon-user",
          label: "员工",
          path: "/employees"
        }
      ]
    };
  },
  methods: {
    handleCommand(command) {
      switch (command) {
        case "goHome":
          this.$router.push("/");
          break;
        case "signBack":
          this.$router.push("/login");
          break;
        default:
          break;
      }
    }
  },
  computed: {
    ...mapState(["userInfo"])
  },
  mounted() {
    this.$store.dispatch("updateUserInfo");
  }
};
</script>

<style lang="less" scoped>
@import url("./main.less");
</style>